<!DOCTYPE html>
<html>

<head>
    <title>Chat Room</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }

        .messages {
            border: 1px solid black;
            width: 400px;
            height: 300px;
            overflow-y: scroll;
            padding: 10px;
            margin-bottom: 20px;
        }

        .message-input {
            width: 400px;
            padding: 10px;
            border: 1px solid black;
            margin-bottom: 20px;
        }

        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>

<div class="container">
    <input type="text" class="message-input" id="tname" placeholder="Type your id here...">
    <button class="btn" onclick="login()" id="login-btn">Ligin</button><br />
    <div class="messages" id="messages">
        <!-- 聊天消息将显示在这里 -->
    </div>
    <input type="text" class="message-input" id="message-input" placeholder="Type your message here...">
    <button class="btn" id="send-btn">Send</button>
</div>
<script>
    const messagesEl = document.getElementById("messages");
    const messageInputEl = document.getElementById("message-input");
    const sendBtnEl = document.getElementById("send-btn");
    const loginBtn1 = document.getElementById("login-btn");

    function write_msg(msg) {
        // document.getElementById("message").innerHTML += msg + "<br/>"
        const messageEl = document.createElement("div");
        messageEl.textContent = msg;
        messagesEl.appendChild(messageEl);
    }

    // 创建WebSocket连接
    function login() {
        websocket = new WebSocket("ws://172.21.207.86:8080/sylar/chat");

        websocket.onerror = function() {
            write_msg("onerror");
        }

        websocket.onopen = function() {
            var o = {}
            o.type = "login_request"
            o.name = document.getElementById('tname').value;

            websocket.send(JSON.stringify(o));
        }

        websocket.onmessage= function(e) {
            //alert("onmessage " + e.data);
            var o = JSON.parse(e.data);
            if(o.type == "user_enter") {
                write_msg("[" + o.time + "][" + o.name + "] 加入聊天室");
            } else if(o.type == "user_leave") {
                write_msg("[" + o.time + "][" + o.name + "] 离开聊天室");
            } else if(o.type == "msg") {
                write_msg("[" + o.time + "][" + o.name + "] " + o.msg);
            } else if(o.type == "login_response") {
                write_msg("[" + o.result + "][" + o.msg+ "]");
            }
        }

        websocket.onclose= function() {
            write_msg("服务器断开");
        }
    }


    function sendmsg() {
        var o = {}
        o.type = "send_request";
        o.msg = document.getElementById('msg').value;
        websocket.send(JSON.stringify(o));
    }

    // 当点击发送按钮时，将消息发送到服务器
    sendBtnEl.addEventListener("click", () => {
        const message = messageInputEl.value;
        if (message.trim() === "") {
            return;
        }
        var o = {}
        o.type = "send_request";
        o.msg = message;
        websocket.send(JSON.stringify(o));
        messageInputEl.value = "";

    });

    // 当按下Enter键时，将消息发送到服务器
    messageInputEl.addEventListener("keydown", (event) => {
        if (event.key === "Enter") {
            sendBtnEl.click();
        }
    });
</script>
</body>

</html>